<template>
  <el-dialog title="新建发送任务" :visible.sync="visible" custom-class="dialog_send" @open="clearData">
    <h4>发送对象</h4>
    <el-row class="conditions">
      <div v-for="item,n in conditions" class="condition">
        <conditionItem ref="newsend" :condition="item">
        </conditionItem>
        <i class="el-icon-plus" @click="handleAddCondition"></i>
        <i v-if="conditions.length !== 1" class="el-icon-minus" @click="handleDelCondition(n)"></i>
      </div>
    </el-row>
    <h4>发送时间</h4>
    <el-row>
      <el-date-picker
        v-model="sendTime"
        type="datetime"
        format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期时间">
      </el-date-picker>
    </el-row>
    <h4>发送记录</h4>
    <el-table v-loading="loading2" element-loading-text="拼命加载中" :data="sendList.list" stripe height="200">
      <el-table-column label="发送时间">
        <template slot-scope="scope">
          {{dateFormat(scope.row.sendTime)}}
        </template>
      </el-table-column>
      <el-table-column label="发送方式">
        <template slot-scope="scope">
          {{scope.row.sendType==1?'立即发送':'定时发送'}}
        </template>
      </el-table-column>
      <el-table-column label="发送状态">
        <template slot-scope="scope">
          {{mapSendStatus(scope.row.sendStatus)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.sendStatus==0" type="text" @click="handleCancelSend(scope.row.id)">取消发送</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        small
        :current-page.sync="page"
        layout="prev, pager, next"
        :total="sendList.page.total"
        @current-change="getSendPlans">
      </el-pagination>
    </div>
    <div slot="footer">
      <el-button type="primary" @click="handleSendNow" :loading="isSave">立即发送</el-button>
      <el-button type="primary" @click="handleSendAtTime" :loading="isSave2">定时发送</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {mapState, mapActions, mapMutations} from 'vuex'
  import conditionItem from '@/components/common/content/wxSendCondition'
  export default {
    components: {conditionItem},
    data () {
      return {
        page: 1,
        visible: false,
        isSave: false,
        isSave2: false,
        loading2: false
      }
    },
    mounted () {
      this.getWechatList()
    },
    watch: {
      'sendInfo.id': {
        handler: function () {
          this.getSendPlans()
        }
      }
    },
    computed: {
      ...mapState({
        wechatList: state => state.wechatManage.wechatList,
        sendInfo: state => state.contentManage.wxSendInfo,
        conditions: state => state.contentManage.wxSendInfo.conditions,
        sendList: state => state.contentManage.wxSendList
      }),
      sendTime: {
        get () {
          return this.$store.state.contentManage.wxSendInfo.sendTime
        },
        set (val) {
          this.UPDATE_WX_SEND_INFO({sendTime: val})
        }
      }
    },
    methods: {
      ...mapActions(['addWxSendPlan', 'getWxSendPlans', 'setWxSendPlanStatus', 'getWechatList']),
      ...mapMutations(['UPDATE_WX_SEND_INFO']),
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
      },
      // 获取发送计划
      getSendPlans () {
        this.getWxSendPlans({
          id: this.sendInfo.id,
          page: this.page,
          size: 10
        })
      },
      // 添加发送条件
      handleAddCondition () {
        this.conditions.push({appid: null, tagId: null})
      },
      // 删除发送条件
      handleDelCondition (index) {
        this.conditions.splice(index, 1)
      },
      // 立即发送
      async handleSendNow () {
        if (!this.sendCheck()) {
          return false
        }
        this.isSave = true
        await this.addWxSendPlan({
          id: this.sendInfo.id,
          sendType: 1,
          sendTime: this.$date.format(new Date(), 'YYYY-MM-DD HH:mm:ss'),
          conditions: this.conditions
        })
        this.isSave = false
        this.getSendPlans()
      },
      // 定时发送
      async handleSendAtTime () {
        if (!this.sendCheck(true)) {
          return
        }
        this.isSave2 = true
        await this.addWxSendPlan({
          id: this.sendInfo.id,
          sendType: 2,
          sendTime: this.$date.format(new Date(this.sendInfo.sendTime), 'YYYY-MM-DD HH:mm:ss'),
          conditions: this.conditions
        })
        this.isSave2 = false
        this.getSendPlans()
      },
      // 映射发送状态
      mapSendStatus (status) {
        switch (status) {
          case 0:
            return '待发送'
          case 1:
            return '发送中'
          case 2:
            return '发送完成'
          case 3:
            return '已取消'
        }
      },
      // 取消发送
      async handleCancelSend (id) {
        await this.$confirm('是否确认取消')
        const res = await this.setWxSendPlanStatus({status: 3, planId: id})
        this.$message.success(res.data.msgZ)
        this.getSendPlans()
      },
      // 清除数据
      clearData () {
        this.UPDATE_WX_SEND_INFO({
          sendType: null,
          sendTime: null,
          conditions: [{appid: null, tagId: null}]
        })
      },
      sendCheck (ifTime) {
        if (!this.conditions[0].tagId) {
          this.$message.warning('请选择发送对象')
          return false
        }
        if (ifTime) {
          if (!this.sendInfo.sendTime) {
            this.$message.warning('请选择发送时间')
            return false
          }
        }
        return true
      }
    }
  }
</script>
<style lang="scss">
  .dialog_send{
    &{min-width:700px;}
    h4{margin-bottom:15px;font-size:14px;}
    .conditions{
      .label{margin-left:10px;}
      .condition{margin-bottom:15px;}
      .condition:last-of-type{margin-bottom:0;}
      .conditionItem{display:inline-block;}
      .el-icon-plus,.el-icon-minus{margin-left:6px;cursor:pointer;}
    }
  }
</style>
